<template>
	<view class="commission">
		<view class="commission-bg">
			<view class="content">
				<view class="price">
					{{count.title}}
				</view>
				<view class="price">
					{{(count.sum || 0 )}} <text style="font-size: 35rpx;">￥</text>
				</view>
			</view>
			<view class="type">
				<view class="userName" @tap="goOrderType" v-if="params.funtype==='orderPriceSum'&&count.title">
					维修类别
				</view>
			</view>
		</view>
		<commissionTList class="mescroll" :height="tableHeight" :params="params" @sendCount="getCount">
		</commissionTList>
	</view>


</template>

<script>
	import dayjs from "dayjs"
	import {
		publicConfig
	} from "@/api"
	import commissionTList from './components/commissionTList.vue'
	import FormMixins from "@/mixins/formMixins"
	export default {
		components: {
			commissionTList
		},
		data() {
			return {
				date: dayjs().format("YYYY-MM-DD"),
				show: false,
				tableHeight: 300,
				params: {
					page: 1,
					limit: 10,
				},
				count: {},
			}
		},
		onLoad(options) {
			let config = []
			try {
				config = JSON.parse(uni.getStorageSync('commissionConfig'))?.countFieldFormList ?? []
			} catch (e) {}
			this.params = {
				...this.params,
				...config.reduce((n, c) => (c.name in n ? n[c.name] = '' : n[c.name] = '', n), {}),
				...options,
			}
			this.setHeight()
		},
		methods: {
			goOrderType() {
				const params = JSON.stringify(this.params, ['funtype', 'month'])
				this.nav(`/subpackage/member/pages/orderType/index?params=${params}`)
			},
			setHeight() {
				const that = this
				uni.getSystemInfo({
					success: ({
						windowHeight
					}) => {
						setTimeout(async () => {
							await that.$nextTick()
							uni.createSelectorQuery().selectAll('.mescroll')
								.boundingClientRect(
									res => {
										// 获取列表定位
										that.tableHeight = windowHeight - res[0].top
									}).exec()
						})

					}
				})
			},
			getCount(count) {
				this.count = count
				this.setHeight()
			}
		}
	}
</script>

<style scoped lang="scss">
	.commission {
		box-sizing: border-box;
		background: #f6f5fa;

		&-bg {
			border-radius: 10rpx;
			background: #0d6cfc;
			padding: 50rpx 40rpx;
			color: #fff;

			.title {
				opacity: 0.6;
			}

			.content {
				display: flex;
				margin-top: 30rpx;
				justify-content: space-between;
				align-items: center;

				.price {
					font-size: 60rpx;
					font-weight: bold;
				}


			}
		}
	}

	.type {
		display: flex;
		justify-content: flex-end;
		margin-top: 30rpx;

		.userName {
			background-color: #fff;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			color: #5799fd;
			border-radius: 30rpx;
			width: 200rpx
		}
	}
</style>